<template>
    <use :x="x" :y="y" :width="width" :height="height" :xlink:href="iconHref" :style="customStyle"></use>
</template>

<script>

export default {
    name: 'VoGridUse',
    props: {
        x: {
            type: [Number, String],
            default: '50%'
        },
        y: {
            type: [Number, String],
            default: '50%'
        },
        width: {
            type: [Number, String],
            default: 20
        },
        height: {
            type: [Number, String],
            default: 20
        },
        href: String,
        textAnchor: {
            //水平位置 start middle end
            type: String,
            default: 'middle'
        },
        transformX: {
            type: [Number, String],
            default: '0px'
        },
        transformY: {
            type: [Number, String],
            default: '0px'
        },
    },
    computed: {
        iconHref() {
            const { href } = this;
            return `#icon-${href}`
        },
        customStyle() {
            return {
                textAnchor: this.textAnchor,
                transform: `translate(${this.transformX}, ${this.transformY})`
            }
        }
    }
}
</script>